<template>
  <div class="friendWrap">
    <div class="friendListBar">
      <div class="applyFriend" @click="showApplyFriend">
        <div class="newFriend">
          <Icon :className="{width: '40px', height: '40px'}" icon="iconxinpengyou"></Icon>
          <span>新的朋友</span>
        </div>
        <i class="iconfont iconright"></i>
      </div>
      <FriendList @click="showFriendDetail"/>
      <span class="addFriend iconfont icontianjia" @click="clickAddFriendFun"></span>
    </div>
    <FriendDetail
      v-if="$route.query.chatCode&&$route.query.chatCode!='apply'"
      class="friendDetailBar"
      :friendDetail="friendDetail"
    />
    <FrienfApply
      v-if="$route.query.chatCode&&$route.query.chatCode=='apply'"
      class="friendDetailBar"
    />

    <el-dialog title="添加好友" :visible.sync="dialogVisible" width="50%">
      <div class="searchFriendWrap">
        <div class="searchFriend">
          <el-input
            class="el-input"
            v-model="searchValue"
            type="text"
            placeholder="请输入社交号/手机号"
            @keyup.enter.native="searchFriendFun"
          />
          <el-button type="primary" @click="searchFriendFun">查询</el-button>
        </div>
        <div class="searchFriendList">
          <div class="searchFriendListItem" v-if="friendInfo.chatCode">
            <span>
              <img v-if="friendInfo.headImg" :src="friendInfo.base+friendInfo.headImg">
            </span>
            <div class="searchFriendListItemDetail">
              <span class="userNameSpan">{{friendInfo.userName}}</span>
              <span class="citySpan">
                <i :class="['iconfont', friendInfo.sex?'red iconwoman':'blue iconwoman1']"></i>
                {{friendInfo.province+friendInfo.city}}
              </span>
              <span class="btnSpan" @click="addFriendFun(friendInfo)">加好友</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type='text/ecmascript-6'>
import api from "@/api/index.js";
import FriendList from "./FriendList.vue";
import FriendDetail from "./FriendDetail.vue";
import FrienfApply from "./FrienfApply.vue";
import Icon from "@/components/Icon.vue";
export default {
  components: {
    FriendList,
    FriendDetail,
    FrienfApply,
    Icon
  },
  data() {
    return {
      dialogVisible: false,
      searchValue: null,
      friendDetail: {},
      friendInfo: {}
    };
  },
  mounted() { },
  methods: {
    showFriendDetail(data) {
      this.friendDetail = data;
      const name = this.$route.name;
      this.$router.push({ name: name, query: { chatCode: data.chatCode } });
    },
    clickAddFriendFun() {
      this.dialogVisible = true;
    },
    showApplyFriend() {
      const name = this.$route.name;
      this.$router.push({ name: name, query: { chatCode: 'apply' } });
    },
    addFriendFun(item) {
      const params = {
        chatCode: item.chatCode,
        status: 1, // 1 等待验证，2 通过验证，3 拒绝验证
        userChatCode: JSON.parse(localStorage.userInfo).chatCode
      };

      // 好友申请
      api.friendApply(params).then((res) => {
        if (res.data.code == 0) {
          // this.$socket.emit("applyFriend", params);
          this.$message({
            message: '消息已发送，等待对方同意',
            type: 'success'
          });
          this.dialogVisible = false;
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      })
    },
    searchFriendFun() {
      const params = {
        chatCode: this.searchValue
      }
      api.userFindUserDetail(params).then((res) => {
        if (res.data.code == 0) {
          if (!res.data.data) {
            this.$message.error(res.data.message);
          } else {
            this.friendInfo = res.data.data;
          }
        }
      })
    }
  }
};
</script>

<style lang='scss' scoped>
.friendWrap {
  height: 100%;
  display: flex;
  .friendListBar {
    position: relative;
    width: 250px;
    height: 100%;
    background: #efefef;
    flex-shrink: 0;
    .applyFriend {
      padding: 10px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
      .newFriend {
        display: flex;
        align-items: center;
        > span {
          margin-left: 10px;
        }
      }
    }
    .addFriend {
      position: absolute;
      bottom: 35px;
      right: 35px;
      font-size: 40px;
      color: #0188fb;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .friendDetailBar {
    flex: 1;
  }
  .searchFriendWrap {
    .searchFriend {
      display: flex;
      .el-input {
        margin-right: 10px;
      }
    }
    .searchFriendList {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      .searchFriendListItem {
        display: flex;
        > span {
          width: 60px;
          height: 60px;
          border: 1px solid #ddd;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        .searchFriendListItemDetail {
          margin-left: 5px;
          width: 80px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .citySpan {
            .red {
              color: red;
            }
            .blue {
              color: #0188fb;
            }
          }
          .btnSpan {
            font-size: 14px;
            border-radius: 3px;
            color: #fff;
            padding: 2px 5px;
            background: #0188fb;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>